import './ModalseeS2.css'
import React, { useState } from 'react';
import { Modal, Button } from 'antd'
import {
    Form,
    Input,
    Radio,
    Select,
} from 'antd';
import http from '../../../../../utils/http';
import { fn } from 'moment';
const ModalseeS2 = (props) => {
    // console.log(props);
    // console.log(props.content.state);
    let Check_item_score_id = props.content.Check_item_score_id
    let raddioV = props.content.state == '启用' ? 1 : 2

    // 数据名称
    let [entry_name, setentry_name] = useState()
    const addEntry_name = e => {
        console.log(e.target.value);
        setentry_name(e.target.value)
    };
    // 下限
    let [Lower_limit_of_value, setLower_limit_of_value] = useState()
    const addLower_limit_of_value = e => {
        console.log('下限', e.target.value);
        setLower_limit_of_value(e.target.value)
    };
    // 上限
    let [Upper_limit_of_value, setUpper_limit_of_value] = useState()
    const addUpper_limit_of_value = e => {
        console.log('上限', e.target.value);
        setUpper_limit_of_value(e.target.value)
    };
    // 单位
    let [Company, setCompany] = useState()
    const addCompany = e => {
        console.log('单位', e.target.value);
        setCompany(e.target.value)
    };
    // 分数
    let [Score, setScore] = useState()
    const addScore = e => {
        console.log('分数', e.target.value);
        setScore(e.target.value)
    };
    const { Option } = Select;
    // 表现
    let [Performance, setPerformance] = useState()
    function addPerformance(value) {
        // console.log(`表现 ${value}`);
        console.log(`表现`,value);
        setPerformance(value)
    }

    // 状态
    let [State, setState] = useState(1)
    function addState(value) {
        console.log(`状态 `, value.target.value);
        setState(value.target.value)
    }

    // 编辑
    const [isModalVisible2, setIsModalVisible2] = useState(false);

    const showModal2 = () => {
        setIsModalVisible2(true);
    };

    const handleOk2 = () => {
        setIsModalVisible2(false);
        http({
            url: '/score/edit',
            method: 'post',
            data: {
                Check_item_score_id: Check_item_score_id,
                entry_name: entry_name ||props.content.entry_name,
                Lower_limit_of_value: Lower_limit_of_value ||props.content.Lower_limit_of_value,
                Upper_limit_of_value: Upper_limit_of_value ||props.content.Upper_limit_of_value,
                Company: Company||props.content.Company,
                Score: Score||props.content.Score,
                Performance: Performance||props.content.Performance,
                State: State||props.content.State,
            }
        }).then((res) => {
            if (res) {
                // console.log(res);
                props.fn();
            }
        })
    };

    const handleCancel2 = () => {
        setIsModalVisible2(false);
    };
    // 模态框title
    const CustomTitle2 = () => {
        return (
            <div className='CustomTitle_title'>
                编辑
            </div>
        )
    }
    return (
        <div>
            <a onClick={showModal2}>编辑</a>
            <Modal cancelText='取消' okText='确认' width="715px" title={<CustomTitle2></CustomTitle2>} visible={isModalVisible2} onOk={handleOk2} onCancel={handleCancel2}
                footer={[
                    <Button id="ModalseeS2Btn1" key="back" onClick={handleCancel2}>返回</Button>,
                    <Button id="ModalseeS2Btn2" key="submit" type="primary" onClick={handleOk2}>
                        确认
                    </Button>,]}>
                <div className="ModalseeC2">
                    <Form className="comment">
                        <p>数据名称:</p>
                        <Form.Item>
                            <Input placeholder="请输入数据名称" onChange={addEntry_name} defaultValue={props.content.entry_name} />
                        </Form.Item>
                        <p>数值范围:</p>
                        <div className="Health_value">
                            <Form.Item >
                                <Input placeholder="请输入数值" onChange={addLower_limit_of_value}
                                    defaultValue={props.content.Numerical_range.split("-")[0]}
                                />
                            </Form.Item>
                            <span>——</span>
                            <Form.Item>
                                <Input placeholder="请输入数值" onChange={addUpper_limit_of_value}
                                    defaultValue={props.content.Numerical_range.split("-")[1]}
                                />
                            </Form.Item>
                        </div>
                        <p>单位</p>
                        <Form.Item>
                            <Input placeholder="请输入分值" onChange={addCompany} defaultValue={props.content.Company} />
                        </Form.Item>
                        <p>分值</p>
                        <Form.Item>
                            <Input placeholder="请输入分值" onChange={addScore} defaultValue={props.content.Score} />
                        </Form.Item>
                        <p>表现:</p>
                        <Form.Item >
                            <Select placeholder="请选择" onChange={addPerformance} 
                            defaultValue={props.content.performance}
                             >
                                <Select.Option value="严重">严重</Select.Option>
                                <Select.Option value="偏低">偏低</Select.Option>
                                <Select.Option value="正常">正常</Select.Option>
                                <Select.Option value="偏高">偏高</Select.Option>
                            </Select>
                        </Form.Item>
                        <p className="status">状态:</p>
                        <Form.Item >
                            <Radio.Group onChange={addState} name="radiogroup" defaultValue={raddioV}>
                                <Radio value={1}>启用</Radio>
                                <Radio value={2}>禁用</Radio>
                            </Radio.Group>
                        </Form.Item>
                    </Form>
                </div>
            </Modal>
        </div>
    );
};
export default ModalseeS2;